import { 
  useState,
  useReducer
 } from 'react'
import './App.css'

// function App() {
//   const [count, setCount] = useState(0)

//   return (
//     <>
//       <LoginContext.Provider>
//         <ThemeContext.Provider>
//           <TodosContext.Provider>
//             <Layout>
//               <Header />
//               <Main />
//               <Footer />
//             </Layout>
//           </TodosContext.Provider>
//         </ThemeContext.Provider>
//       </LoginContext.Provider>
//     </>
//   )
// }

const initialState = {
  count: 0,
  // isLogin: false,
  // theme: 'light'
}
// reducer纯函数 返回可靠的状态
// 状态生产器
// case 状态修改的规定
const reducer = (state,action) => {
  switch(action.type){
    case 'increment':
      return {
        count: state.count + 1
      }
    case 'decrement':
      return {
        count: state.count - 1
      }
    case 'incrementByNum':
      return {
        count: state.count + parseInt(action.payload)
      }
    default:
      return state
  }
}

function App() {
  // 初始值 0
  // 当前的状态值 count
  // 界面由当前状态来驱动
  // 修改状态的方法 setCount
  // 响应式
  const [count, setCount] = useState(0)
  // 大型项目
  // dispatch 派发 函数
  // 参数固定 一个对象 必须有type属性
  const [state,dispatch] = useReducer(reducer,initialState)
  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <input type="text" value={count} onChange={(e) => setCount(e.target.value)} />
      <button onClick={() => dispatch({type: 'incrementByNum', payload: count})}>++</button>
    </>
  )
}

export default App
